<template>
	<view class="padding_30">
		<view class="set-item flex" @click="agree('用户协议')">
			<image class="logo-img" src="@/pages/user/static/images/xy.png" mode="widthFix"></image>
			<view class="font_style">
				用户协议
			</view>
			<image class="enter-img" src="@/static/images/enter.png" mode="widthFix"></image>
		</view>
		<view class="set-item flex" @click="agree('隐私政策')">
			<image class="logo-img" src="@/pages/user/static/images/ys.png" mode="widthFix"></image>
			<view class="font_style">
				隐私政策
			</view>
			<image class="enter-img" src="@/static/images/enter.png" mode="widthFix"></image>
		</view>
		<view class="set-item flex" @click="agree('共建合约')">
			<image class="logo-img" src="@/pages/user/static/images/gj.png" mode="widthFix"></image>
			<view class="font_style">
				共建合约
			</view>
			<image class="enter-img" src="@/static/images/enter.png" mode="widthFix"></image>
		</view>
		<view class="btn" @click="logoutRef.open()">
			退出登录
		</view>
	</view>
	<uv-popup ref="logoutRef" mode="center" :round="15" :safeAreaInsetBottom="false">
		<view class="register-popup" style="width: 630rpx;">
			<view class="register-title">
				<view class="title">
					提示
				</view>
			</view>
			<view class="tips" style="padding: 100rpx 0 20rpx 0; ">
				是否退出登录？
			</view>
			<view class="footer-btn">
				<view class="cancel" @click="logoutRef.close()">
					取消
				</view>
				<view class="confirm" @click="logout">
					确定
				</view>
			</view>
		</view>
	</uv-popup>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue';
	const logoutRef = ref()
	import {
		useUserStore
	} from '@/store/modules/user.js'
	const userstore = useUserStore()
	const chat2 = inject('$chat')
	const agree = (title) => {
		uni.navigateTo({
			url: '/pages/login/agreement/index?title=' + title
		})
	}
	const logout = () => {
		userstore.logout()
		// 退出IM
		chat2.chatTUILoginOut()
	}
</script>

<style lang="scss" scoped>
	.set-item {
		justify-content: flex-start;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
		width: 690rpx;
		height: 112rpx;
		background: #F6F6F6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.logo-img {
			width: 40rpx;
			height: 40rpx;
		}

		.font_style {
			flex: 1;
			padding-left: 20rpx;
		}

		.enter-img {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.btn {
		position: fixed;
		bottom: 30rpx;
	}

	// 退出
	.register-popup {
		padding: 40rpx 30rpx 40rpx 30rpx;

		.register-title {
			display: flex;
			align-items: center;
			justify-content: center;

			.title {
				flex: 1;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				text-align: center;
			}

			.del-btn {

				width: 32rpx;
				height: 32rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.tips {
			padding: 100rpx 0;
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #333;

			.recharge {

				color: #FE3052;
			}
		}

		.footer-btn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 100rpx;
			font-weight: bold;
			font-size: 28rpx;
			line-height: 88rpx;
			text-align: center;

			.cancel {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #F6F6F6;
				color: #666666;
			}

			.confirm {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				background: #FE3052;
				color: #fff;
			}
		}
	}
</style>